<template>
  <div v-loading="loading">
    <el-tabs v-model="pageName" style="margin-top: 15px" @tab-click="changePage">
      <el-tab-pane label="任务进度" name="first">
        <div v-if="!assignProgress.toString()">暂无数据~</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="'第'+(index+1)+'个任务'" :name="index.toString()" v-for="(item,index) in assignProgress">
            <div style="display: flex">
              <div v-for="(a,index) in item.assignTaskList.task" style="margin-right: 100px">
                <p>{{ `${index + 1}. ${a.taskName}` }}</p>
                <p>
                  <el-image v-for="b in a.images" :src="'https://'+b"
                            style="width: 100px;margin-right: 10px;margin-top: 10px"
                            :preview-src-list="a.images.map(c =>  'https://'+c)"></el-image>
                </p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="验收记录" name="second">
        <div v-if="!evaluateList.toString()">暂无数据~</div>
        <!--        <div v-for="(item,index) in evaluateList" style="margin-bottom: 20px">-->
        <!--          <span style="font-weight: bold">{{ index + 1 }}.验收时间:{{ item.submitDate }}</span>-->
        <!--          <el-steps :active="active" align-center finish-status="success">-->
        <!--            <el-step :title="a.concealedName" v-for="a in item.concealedEvaluateList"-->
        <!--                     :description="a.concealedRemark"></el-step>-->
        <!--          </el-steps>-->
        <!--          <el-steps :active="active" align-center finish-status="success">-->
        <!--            <el-step-->
        <!--                v-for="(a, index) in item.concealedEvaluateList"-->
        <!--                :key="index"-->
        <!--                style="margin-top: 15px"-->
        <!--                :status="a.flag === 1 ? 'success' : (a.flag === 2 ? 'error' : 'wait')"-->
        <!--            >-->
        <!--              <template #title>{{ a.concealedName }}</template>-->
        <!--              <template #description>-->
        <!--                <div>{{ a.concealedRemark }}</div>-->
        <!--                <el-image-->
        <!--                    v-if="a.concealedScorePicture && a.concealedScorePicture.length"-->
        <!--                    v-for="b in a.concealedScorePicture"-->
        <!--                    :src="'https://' + b"-->
        <!--                    :preview-src-list="a.concealedScorePicture.map(c =>  'https://'+c)"-->
        <!--                    style="width: 34px; height: 34px;margin-top: 5px"-->
        <!--                    fit="cover"-->
        <!--                />-->
        <!--              </template>-->
        <!--            </el-step>-->
        <!--          </el-steps>-->
        <el-tabs v-model="activeName1" @tab-click="handleClick">
          <el-tab-pane :label="(index + 1)+'.验收时间:'+ item.submitDate" :name="index.toString()"
                       v-for="(item,index) in evaluateList">
            <div style="display: flex;align-items: flex-start;flex-wrap: wrap;">
              <div v-for="(a, index) in item.concealedEvaluateList"  :style="{ color: a.flag == 1 ? 'black' : (a.flag == 2 ? 'red' : 'black') }" style="width: 200px;margin-bottom: 15px">
                <p>{{ (index + 1) + '.' + a.concealedName }}</p>
                <div style="height: 40px;line-height: 40px">
                  <p v-if="a.concealedRemark">{{ a.concealedRemark }}</p>
                  <p v-else>-</p>
                </div>
                <p v-if="a.concealedScorePicture && a.concealedScorePicture.length" style="display: flex">
                  <el-image v-for="b in a.concealedScorePicture" :src="'https://'+b"
                            style="width: 100px;margin-right: 10px;margin-top: 10px"
                            :preview-src-list="a.concealedScorePicture.map(c =>  'https://'+c)"></el-image>
                </p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!--        </div>-->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "assignTbs",
  props: {
    tabsList: {
      type: Object,
      default: () => {
      }
    },
  },
  watch: {
    tabsList: {
      handler(newVal, oldVal) {
        this.getData()
        this.pageName = 'first'
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      activeName: '0',
      activeName1: '0',
      active: 100,
      assignProgress: [],
      evaluateList: [],
      pageName: "first",
      loading: false,
    }
  },
  methods: {
    handleClick() {
    },
    getData() {
      this.loading = true
      if (this.tabsList.assignTaskId && this.tabsList.supplierType) {
        this.$api.assignGetTaskProgressVo(this.tabsList).then(res => {
          if (this.tabsList.supplierType == 1) {
            this.assignProgress = res.list
          } else {
            this.assignProgress = res.list2
          }
        })
        this.loading = false
      }
    },
    changePage(val) {
      if (val.name == 'second') {
        this.loading = true
        this.$api.evaluateGetEvaluateListByTaskId({
          taskId: this.tabsList.assignTaskId,
          pageSize: 1000,
          pageNumber: 1
        }).then(res => {
          this.evaluateList = res.data
          this.loading = false
        })
      }
    }
  }
}
</script>

<style scoped>

</style>